<template>
  <div class="grid grid-cols-4 gap-y-2">
    <div v-for="item in fieldList" :key="item.field" class="flex items-center">
      <label class="label">{{ item.label }}：</label>
      <div class="flex-1 flex">
        <!-- <span v-if="item.type == 'cascader'" class="flex items-center">
          <Cascader :item="item" v-model:modelValue="formData[item.field]" :options="organizationData" style="width: 200px" />
          <el-button type="primary" @click="save()">保存</el-button>
        </span> -->
        <span>
          {{ formData[item.field] || "-" }}
        </span>
        <el-popover placement="bottom" :width="270" trigger="click" :visible="item.visible" v-if="item.edit">
          <div>
            <el-input v-model="popoverValue" style="width: 240px" rows="4" type="textarea" />
            <div class="text-right mt-[6px]">
              <el-button type="success" size="small" @click="item.visible = false">取消</el-button>
              <el-button type="primary" size="small" @click="save(item.field), (item.visible = false)">保存</el-button>
            </div>
          </div>
          <template #reference>
            <svg-icon icon-class="edit_icon" class="ml-[4px] text-blue mt-[4px]" @click=";(item.visible = true), openPopove(formData[item.field])"></svg-icon>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
  <div class="flex items-center mt-3">
    <label class="label">备注：</label>

    <div class="flex-1 flex">
      <span>
        {{ formData.remarks }}
      </span>
      <el-popover placement="bottom" :width="270" trigger="click" :visible="visible">
        <div>
          <el-input v-model="popoverValue" style="width: 240px" rows="4" type="textarea" />
          <div class="text-right mt-[6px]">
            <el-button type="success" size="small" @click="visible = !visible">取消</el-button>
            <el-button type="primary" size="small" @click="save('remarks'), (visible = false)">保存</el-button>
          </div>
        </div>
        <template #reference>
          <svg-icon icon-class="edit_icon" class="ml-[4px] text-blue mt-[4px]" @click=";(visible = true), openPopove(formData.remarks)"></svg-icon>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  plan_id: { type: String, default: "" },
  formData: { type: Object, default: () => {} },
})
import Cascader from "@/components/XForm/components/Cascader"

// 级联配置 选项数据
const organizationData = ref({})
import { getCascader } from "@/components/XForm/components/Cascader/getCascader.js"
const emit = defineEmits(["submit"])
onMounted(async () => {
  let cascaderArrNewOpt = await getCascader(["department"])
  for (const key in cascaderArrNewOpt) {
    organizationData.value[key] = cascaderArrNewOpt[key]
  }
})

const fieldList = ref([
  { label: "计划名称", field: "plan_name", edit: true },
  { label: "PR单", field: "pr_number" },
  { label: "备货类型", field: "plan_type_text" },
  // {
  //   label: "运营部门",
  //   field: "planning_department",
  //   type: "cascader",
  //   cascaderType: "department",
  //   placeholder: "运营部门",
  //   cascaderProps: {
  //     multiple: false,
  //   },
  // },
  { label: "运营部门", field: "planning_department_name" },
  { label: "部门当月采购额度", field: "amount" },
  { label: "已使用额度", field: "employ_amount" },
  { label: "剩余额度（不包含本单）", field: "leave_amount" },
])

// const assss = (item) => {
//   console.log(item)
//   item.visible = false
// }
import { stockingPlanUpdate } from "@/api/plan"
const visible = ref(false)
const popoverValue = ref("")

const openPopove = (value, isvisible) => {
  popoverValue.value = value
  isvisible = true
}
const save = (field = "") => {
  // "planning_department",
  let keys = ["plan_type", "plan_name", "remarks"]
  let params = { plan_id: props.plan_id }
  keys.forEach((key) => (params[key] = props.formData[key]))
  field && (params[field] = popoverValue.value)
  stockingPlanUpdate(params).then((res) => {
    emit("submit")
  })
}
</script>
<style lang="scss" scoped>
.label {
  color: #999;
  width: 170px;
  text-align: right;
}
.value {
  color: #333;
}
</style>
